<template>
  <div>
    <div id="Bottom4"></div>
  </div>
</template>
<script>
import { Pie, measureTextWidth } from '@antv/g2plot';
export default {
  data(){
    return {}
  },
  methods:{
    myAntv(){

      function renderStatistic(containerWidth, text, style) {
        const { width: textWidth, height: textHeight } = measureTextWidth(text, style);
        const R = containerWidth / 2;
        // r^2 = (w / 2)^2 + (h - offsetY)^2
        let scale = 1;
        if (containerWidth < textWidth) {
          scale = Math.min(Math.sqrt(Math.abs(Math.pow(R, 2) / (Math.pow(textWidth / 2, 2) + Math.pow(textHeight, 2)))), 1);
        }
        const textStyleStr = `width:${containerWidth}px;`;
        return `<div style="${textStyleStr};font-size:${scale}em;line-height:${scale < 1 ? 1 : 'inherit'};">${text}</div>`;
      }

      const data = [
        { type: '工资高', value: 27 },
        { type: '有亲戚', value: 25 },
        { type: '工作机会多', value: 18 },
        { type: '工作种类多', value: 15 },
        { type: '喜欢大城市', value: 10 },
        { type: '其他', value: 5 },
      ];

      const piePlot = new Pie('Bottom4', {
        appendPadding: 10,
        data,
        autoFit:false,
        width:280,
        height:150,
        angleField: 'value',
        colorField: 'type',
        color: ({ type }) => {
          if(type === '工资高'){
            return 'red';
          }else if(type === '有亲戚'){
            return 'Orange';
          }else if(type === '工作机会多'){
            return 'yellow';
          }else if(type === '工作种类多'){
            return 'Green';
          }else if(type === '喜欢大城市'){
            return 'blue';
          }
          return 'Thistle';
        },
        radius: 1,
        innerRadius: 0.64,
        meta: {
          value: {
            formatter: (v) => `${v} ¥`,
          },
        },
        label: {
          type: 'inner',
          offset: '-50%',
          style: {
            textAlign: 'center',
          },
          autoRotate: false,
          content: '{value}',
        },
        statistic: {
          title: {
            offsetY: -4,
            style: {
              fontSize: '15px',
            },
            customHtml: (container, view, datum) => {
              const { width, height } = container.getBoundingClientRect();
              const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
              const text = datum ? datum.type : 'Total';
              return renderStatistic(d, text, { fontSize: 15 });
            },
          },
          content: {
            offsetY: 4,
            style: {
              fontSize: '15px',
            },
            customHtml: (container, view, datum, data) => {
              const { width } = container.getBoundingClientRect();

              const text = datum ? `${datum.value}` : `${data.reduce((r, d) => r + d.value, 0)}`;
              return renderStatistic(width, text, { fontSize: 15 });
            },
          },
        },
        // 添加 中心统计文本 交互
        interactions: [{ type: 'element-selected' }, { type: 'element-active' }, { type: 'pie-statistic-active' }],
      });

      piePlot.render();
    }
  },
  mounted(){
    this.myAntv()
  }
}
</script>
<style lang="scss" scoped>
#Bottom4{
  width: 280px;
  margin: 0 auto;
}
</style>